<!doctype html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link rel="shortcut icon" href="#" />
    <link rel="stylesheet" type="text/css" href="{{pluginResources}}/Template/dailyData/dailyData.css" />
    <link rel="preload" href="{{pluginResources}}/fonts/Guruwords.ttf" as="font" />
</head>

<body id="body" {{sys.scale}}>
    <div>
        <div id="account">
            {{if avatarUrl}}<img src="{{avatarUrl}}" id="user-avatar">{{/if}}
            <div id="user-name">{{gameData.roleName}}</div>
            <div id="user-uid">{{gameData.roleId}}</div>
        </div>
        <div id="data">
            <div id="stamina">{{gameData.energyData.cur}}/{{gameData.energyData.total}}</div>
            <div id="activity">{{gameData.livenessData.cur}}/{{gameData.livenessData.total}}</div>
            <div id="dailytime">{{gameData.energyData.refreshTimeStamp}}</div>
            <div id="experience">{{gameData.battlePassData[1].cur}}/{{gameData.battlePassData[1].total}}</div>
            <div id="level">LV.{{gameData.battlePassData[0].cur}}</div>
            <div id="progress" style="background: linear-gradient(90deg, #b9a068 0%, #c8c5bc 0%);"></div>
        </div>

        <div id="curExp" style="display: none;">{{gameData.battlePassData[1].cur}}</div>
        <div id="totalExp" style="display: none;">{{gameData.battlePassData[1].total}}</div>
        <div id="copyright">{{@copyright}}</div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const curExp = parseInt(document.getElementById('curExp').innerText);
            const totalExp = parseInt(document.getElementById('totalExp').innerText);
            const pct = (curExp / totalExp) * 100;
            const progressEl = document.getElementById('progress');
            progressEl.style.background = `linear-gradient(90deg, #b9a068 ${pct}%, #c8c5bc ${pct}%`;

            const timestampMs = parseInt(document.getElementById('dailytime').innerText, 10);
            const date = new Date(timestampMs * 1000);
            const now = new Date(new Date().toLocaleString('en-US', { timeZone: 'Asia/Shanghai' }));

            if (timestampMs === 0 || date < now) {
                document.getElementById('dailytime').innerText = '体力已恢满';
            } else {
                document.getElementById('dailytime').innerText = `${date.getDate() > now.getDate() ? '明天' : ''}${date.getHours()}:${date.getMinutes()}恢满`;
            }
        });
    </script>
</body>

</html>